<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c_rt="http://java.sun.com/jstl/core_rt"
	xmlns:permittedTaglibs="http://jakarta.apache.org/taglibs/standard/permittedTaglibs"
	xmlns:scriptfree="http://jakarta.apache.org/taglibs/standard/scriptfree"
	xmlns:mj="http://mojarra.dev.java.net/mojarra_ext"
	xmlns:x="http://java.sun.com/jsp/jstl/xml"
	xmlns:x_rt="http://java.sun.com/jstl/xml_rt"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:fmt_rt="http://java.sun.com/jstl/fmt_rt">

<h:head>
	<title>Baas TSI2</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Proyecto de baas 2013" />
	<meta name="author" content="TSI214" />

	<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}
</style>

	<!-- Bootstrap -->
	<link href="resources/css/bootstrap-responsive.css" rel="stylesheet" />
	<link href="resources/css/bootstrap.css" rel="stylesheet"
		media="screen" />
	<link href="resources/css/newStyles.css" rel="stylesheet" />
	<!-- Fav and touch icons -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144"
		href="resources/ico/apple-touch-icon-144-precomposed.png" />
	<link rel="apple-touch-icon-precomposed" sizes="114x114"
		href="resources/ico/apple-touch-icon-114-precomposed.png" />
	<link rel="apple-touch-icon-precomposed" sizes="72x72"
		href="resources/ico/apple-touch-icon-72-precomposed.png" />
	<link rel="apple-touch-icon-precomposed"
		href="resources/ico/apple-touch-icon-57-precomposed.png" />
	<link rel="shortcut icon" href="resources/ico/favicon.png" />
	<!-- 	<script src="http://code.jquery.com/jquery.js"></script> -->
	<!-- 	<script src="resources/js/bootstrap.js"></script> -->

</h:head>
<body>


	<div>
		<div class="container-fluid blue" >
			<table class="table table-bordered">
					<tr>
						<td><b>Aplicacion</b></td>
						<td><h:outputText value="#{appSesBean.nombre}" /></td>
					</tr>
			</table>
			<table class="table table-bordered">
				<tr>
					<th><h:form id="rolForm">
							<table class="table-bordered">
								<tr>
									<td><h:inputText value="#{rolBean.nombre}" id="rolNom"
											required="true" requiredMessage="debe ingresar un nombre" /></td>
									<td><h:commandButton class="btn btn-primary"
											data-loading-text="loading..." value="agregar rol"
											action="#{rolBean.altaRol()}" /></td>
									<td>
										<div class="alert alert-warning">
											<strong><h:message for="rolNom" showDetail="false"
													showSummary="true" /> </strong>
										</div>
									</td>
								</tr>
							</table>
						</h:form></th>
				</tr>
				<tr>
					<td>
						<table>
							<tr>
								<td width="50px !important">
									<ul class="nav nav-list">
										<li class="nav-header">Roles</li>
										<h:form class="span2">
											<c:forEach var="rol" items="#{appSesBean.getRoles()}">

												<li><h:commandLink action="#{rol.showPerms()}"
														value="#{rol.nombre}" /></li>

											</c:forEach>
										</h:form>
									</ul>
								</td>
								<td><ui:include src="/infoRol.xhtml" /></td>

							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</div>

</body>
</html>
